import React, { createContext, useState, useEffect, useRef } from 'react';
import { Toast, Popup } from 'antd-mobile'
import HeadTop from '@/components/HeadTop';
import ChangeUserModal from '@/components/ChangeUserModal';
import Loading from '@/components/Loading';

import FooterInfinite from '@/components/FooterInfinite';
import { validatenull } from "@/utils/validate";
import ListItem from '../_parts/ListItem';
import ApiIndex from '@/api/equipment.js';
import "./index.less"

import { MyContext } from '@/context/index';
const { Provider, Consumer } = MyContext

function Index({ history }) {
    const [inputVal, setInputVal] = useState('');
    const [List, setList] = useState([]); //列表
    const [hasMore, setHasMore] = useState(true) //上拉
    const [pageNum, setPageNum] = useState(1) //页码
    const childRef = useRef(null);
    const [loading, setLoading] = useState(false);

    const [basicColumns, setbasicColumns] = useState([]) //字典

    const childPid = useRef(null);

    useEffect(() => {
        getRequest()
        getDic()
    }, [])

    // 字典
    const getDic = () => {
        ApiIndex.dictDetails({ dictCode: 'REPAIR_TASK_TYPE' }).then(res => {
            if (res.data.code == 0) {
                setbasicColumns([res.data.data.records])
            }
        })
    }



    const getRequest = async (change) => {
        setLoading(true)
        let params = {
            page: pageNum,
            size: 9999,
            type: '',
            createUser: '',
            statusList: ['TO_BE_REPAIRED', 'ACCEPTED', 'REPAIRING', 'REPAIRED_TO_BE_CONFIRMED', 'CANCEL_TO_BE_CONFIRMED']
        }

        let res = await ApiIndex.getList(params)
        setLoading(false)
        if (res.data.code) {
            Toast.show({
                content: '请求失败:' + res.data.msg,
            })
            return
        }
        if (res.data.data.records.length) {

            let list = res.data.data.records
            list.sort((a, b) => {
                if (a.status === 'REPAIRED_TO_BE_CONFIRMED' && b.status !== 'REPAIRED_TO_BE_CONFIRMED') {
                    return -1;
                } else if (a.status !== 'REPAIRED_TO_BE_CONFIRMED' && b.status === 'REPAIRED_TO_BE_CONFIRMED') {
                    return 1;
                } else {
                    return 0;
                }
            });
            if (change) {
                setList(list)
            } else {
                setList(List.concat(list))
            }
            setHasMore(true)
            setPageNum(pageNum + 1)
        }
        if (res.data.data.current == res.data.data.pages || !res.data.data.pages) {
            setHasMore(false)
        }
    }

    // 搜索
    const sendHandlePressVal = (value) => {
        if (validatenull(value)) return

        history.push("/equipmentAdd", { from: "equipment", no: value })
        // setInputVal(value)
        // let _value = value
        // if (value.indexOf("*") != -1) {
        //     _value = value.split("*")[0]
        // }
        // handleDebounce(_value, List)
    }
    const handleDebounce = (value, list) => {
        setInputVal('')
        if (list.length < 1) {
            Toast.show({
                content: '暂无数据'
            })
            return
        }

        let arr = list.filter(el => el.no == value)
        if (!arr.length) {
            Toast.show({
                content: '暂无匹配数据'
            })
            return
        }
        arr.length && setList([...arr])
    }

    const changePserson = (obj) => {
        childPid.current = obj.id
        if (childRef.current) {
            childRef.current.show();
        }
    }

    return (
        <div className='page-wrapper'>
            {
                loading ? <Loading></Loading> : null
            }
            <Provider value={{ placeholderTxt: "请扫描维修编号", inputVal: inputVal }}>
                <HeadTop
                    title="设备维修"
                    rightTxt="新增"
                    history={history}
                    search={true}
                    getHandleRight={() => history.push("/equipmentAdd")}
                    sendHandlePressVal={sendHandlePressVal}
                ></HeadTop>
            </Provider>

            <div className="page-body" style={{ padding: 15 }}>
                {
                    !List?.length ?
                        <div className='no-list-data'>
                            无更多数据
                        </div> : (
                            List.map(el =>
                                <ListItem
                                    item={el}
                                    history={history}
                                    basicColumns={basicColumns}
                                    changePserson={el => changePserson(el)}
                                    key={el.id}>
                                </ListItem>)
                        )
                }
                {/* <FooterInfinite getRequest={getRequest} hasMore={hasMore}></FooterInfinite> */}
            </div>

            <ChangeUserModal ref={childRef} pId={childPid} loadPage={getRequest}></ChangeUserModal>
        </div>
    );
}

export default Index;
